import React, { Component } from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import util from "@/common/util"
// import cookies from "js-cookie"
import jwt_decode from 'jwt-decode'
import layer from '@/common/layer'
import jquery from 'jquery';

class Declarlogin extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tellphone: '',
            second: 0,
            code: ''
        }
        this.valids = [
            {
                key: 'tellphone',
                func(str) {
                    if (str.length !== 11) {
                        jquery(".errormsg").html("手机号码格式错误")
                        return false
                    } else {
                        jquery(".errormsg").empty()
                    }
                    return true
                }
            },
            {
                key: 'code',
                func(str) {
                    if (str.length === 0) {
                        jquery(".errormsg").html("验证码不能为空")
                        return false
                    } else {
                        jquery(".errormsg").empty()
                    }
                    return true
                }
            }
        ]
    }

    phoneChange(e) {
        this.setState({
            tellphone: e.target.value
        })
    }

    codeChange(e) {
        this.setState({
            code: e.target.value
        })
    }

    async beforeSendCode() {
        if (this.state.second !== 0) { return }
        if (this.state.tellphone.length < 11) {
            jquery(".errormsg").html("手机格式错误")
            return
        } else {
            jquery(".errormsg").empty()
        }
        this.setState({
            second: 60
        });
        let time = setInterval(() => {
            if (this.state.second < 1) {
                clearInterval(time)
            } else {
                this.setState({
                    second: this.state.second - 1
                })
            }
        }, 1000)
        let phone = this.state.tellphone
        let res = await axios.get(`${util.host}/auth/code/sms`, {
            params: {
                deviceId: phone,
                phone: phone
            }
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })

        if (res.data.success) {
            jquery(".errormsg").html("验证码发送成功")
        } else {
            jquery(".errormsg").html("手机号码格式错误")
        }

    }
    async beforeSubmit() {
        for (let item of this.valids) {
            if (!item.func(this.state[item.key])) {
                return;
            }
        }
        let res = await util.rjax({
            url: '/otherProductUser/login/' + this.state.tellphone + "?code=" + this.state.code,
            type: "get"
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
            layer.open({
                content: res.msg,
                btn: '好的'
            })
            localStorage.setItem("salephone", this.state.tellphone)
            localStorage.setItem("identity", res.data)
            window.location.href = './declarsystem.html'
        }
    }

    componentDidMount() {
        if (localStorage.getItem("salephone")) {
            window.location.href = './declarsystem.html'
        }
    }

    render() {
        return (
            <div>
                <div id="login">

                    <div className="item">
                        <div style={{ position: "relative" }}>
                            <input type="text" className="text" autoComplete="off" placeholder="请输入手机号" value={this.state.tellphone} onChange={this.phoneChange.bind(this)} maxLength="11" />
                        </div>
                        <div style={{ position: "relative" }} className="codebox">
                            <input type="text" className="text" autoComplete="off" placeholder="请输入验证码" value={this.state.code} onChange={this.codeChange.bind(this)} />
                            <input type="button" className="yzbtn" value={(this.state.second === 0) ? '验证码' : `剩余${this.state.second}秒`} onClick={this.beforeSendCode.bind(this)} />
                        </div>

                        <div style={{ position: "relative" }}>
                            <span className="errormsg"></span>
                            <input type="button" className="btn" value="登录" onClick={this.beforeSubmit.bind(this)} />
                        </div>
                    </div>

                    <img className="bg" src="/assets/wechat/salebackground.png" alt="" />
                </div>
            </div>
        )
    }
}


ReactDom.render(<Declarlogin />, document.getElementById("app"));